import 'package:flutter/material.dart';
import 'package:flutter_vant/component/popup.dart';
import 'package:rlstyles/main.dart';

class VanActionSheetAction {
  // 标题
  final String? name;
  // 二级标题
  final String? subname;
  // 文字颜色
  final dynamic color;
  // 额外样式
  final Map<String, dynamic> styles;
  // 是否加载状态
  final bool? loading;
  // 是否禁用状态
  final bool? disabled;
  VanActionSheetAction(
      {this.name,
      this.subname,
      this.color = 'rgb(50, 50, 51)',
      this.styles = const {},
      this.loading = false,
      this.disabled = false});
}

class VanActionSheetOption {
  // 面板选项列表
  final List<VanActionSheetAction>? actions;
  // 顶部标题
  final String? title;
  // 取消按钮文字
  final String? cancelText;
  // 选项上方的描述信息
  final String? description;
  // 是否显示关闭图标
  final bool? closeable;
  // 关闭图标名称或图片链接
  final dynamic closeIcon;
  // 是否显示圆角
  final bool? round;
  // 是否显示遮罩层
  final bool? overlay;

  VanActionSheetOption({
    this.title,
    this.closeIcon,
    this.description,
    this.cancelText = '',
    this.actions = const [],
    this.round = true,
    this.overlay = false,
    this.closeable = true,
  });
}

class VanActionSheet extends StatefulWidget {
  final VanActionSheetOption? option;

  const VanActionSheet({this.option});
  @override
  _VanActionSheetState createState() => _VanActionSheetState();

  static show({required BuildContext context, VanActionSheetOption? option}) {
    VanPopup.show(
        context: context,
        option: VanPopupOption(
            round: option?.round,
            overlay: option?.overlay ?? false,
            isShowHeader: false,
            position: 'bottom',
            overlayStyle: {
              CssRule.minHeight: 0,
              CssRule.backgroundColor: 'white',
            },
            child: VanActionSheet(option: option)));
  }

  static remove() {
    VanPopup.remove();
  }
}

class _VanActionSheetState extends State<VanActionSheet> {
  getStyles() {
    return {
      'main': {
        CssRule.flexDirection: 'col',
      },
      'disabled': {
        CssRule.color: 'rgb(200, 201, 204)',
      },
      'description': {
        CssRule.height: 60,
        CssRule.width: double.infinity,
        CssRule.alignItems: 'center',
        CssRule.justifyContent: 'center',
        CssRule.fontSize: 14,
        CssRule.borderBottomColor: '#ebedf0',
        CssRule.borderBottomWidth: 0.5,
        CssRule.borderBottomStyle: 'solid',
      },
      'list-item': {
        CssRule.alignItems: 'center',
        CssRule.justifyContent: 'center',
        CssRule.fontSize: 16,
        // CssRule.width: '100%',
        CssRule.width: double.infinity,
        CssRule.height: 50,
        CssRule.flexDirection: 'col'
      },
      'list-item-desc': {
        CssRule.fontSize: 14,
        CssRule.color: 'rgb(150, 151, 153)',
        CssRule.borderBottomColor: 'rgb(235, 237, 240)',
        CssRule.borderBottomWidth: 0.5,
        CssRule.borderBottomStyle: 'solid',
        CssRule.width: '100%',
        CssRule.alignItems: 'center',
        CssRule.justifyContent: 'center',
        CssRule.height: 60
      },
      'cancelButton': {
        CssRule.alignItems: 'center',
        CssRule.justifyContent: 'center',
        CssRule.width: double.infinity,
        CssRule.height: 50,
        CssRule.marginTop: 8,
        CssRule.backgroundColor: 'white',
        CssRule.fontSize: 16
      },
      'subName': {
        CssRule.color: 'rgb(150, 151, 153)',
        CssRule.fontSize: 12,
      }
    };
  }

  renderLoading() {
    return Frame(
      styles: getStyles()['list-item'],
      children: [
        SizedBox(
            width: getSize(size: 20),
            height: getSize(size: 20),
            child: CircularProgressIndicator(
              strokeWidth: 1,
              valueColor: AlwaysStoppedAnimation(HexColor('#c8c9cc')),
            ))
      ],
    );
  }

  Widget renderListItem(VanActionSheetAction item) {
    if (item.loading == true) return renderLoading();
    Map css = {
      'list-item': true,
      'disabled': item.disabled,
    };
    final Map listItemStyle = StylesMap.getClass(css, getStyles());
    return Frame(
      styles: {
        CssRule.color: item.color,
        ...listItemStyle,
      },
      children: [
        TextView(item.name!),
        item.subname?.isNotEmpty == true
            ? TextView(
                item.subname ?? '',
                styles: getStyles()['subName'],
              )
            : SizedBox(),
      ],
    );
  }

  List<Widget> renderList() {
    return (widget.option?.actions ?? []).map((e) {
      return renderListItem(e);
    }).toList();
  }

  renderDesc() {
    if (widget.option?.description?.isNotEmpty == true) {
      return Frame(styles: {
        ...getStyles()['list-item'] as Map,
      }, children: [
        TextView(widget.option?.description ?? '',
            styles: getStyles()['list-item-desc'])
      ]);
    } else {
      return Container();
    }
  }

  renderCancelButton() {
    if (widget.option?.cancelText?.isNotEmpty == true) {
      return Frame(
          styles: getStyles()['cancelButton'],
          onClick: () {
            VanPopup.remove();
          },
          children: [TextView(widget.option?.cancelText ?? '取消')]);
    } else {
      return Container();
    }
  }

  renderGap() {
    if (widget.option?.cancelText?.isNotEmpty == true) {
      return Frame(
        styles: {
          CssRule.height: 8,
          CssRule.backgroundColor: 'rgb(247, 248, 250)'
        },
      );
    } else {
      return SizedBox();
    }
  }

  @override
  Widget build(BuildContext context) {
    return Frame(
      styles: getStyles()['main'],
      children: [
        renderDesc(),
        ...renderList(),
        renderGap(),
        renderCancelButton()
      ],
    );
  }
}
